<div id="navtab1" style="width: 100%;">
        <div title="扩展信息" tabid="tabItem3">
            <div id="Div1">
                <div position="center">
                    <div style="padding: 5px 8px;" class="div_content">
                        <div class="div_title">
                            <span class="infor_title"> </span>产品规格
                            <div>
                                <hr/>
                            </div>
                        </div>
                      
                        <div class="div_contentlist">
                            {foreach $sku as $k=>$v}
                            <div class="layui-col-md12">
                                <ul class="Father_Title">
                                    <li>{$v.sku_key}:</li>
                                </ul>
                                <ul class="Father_Item{$k}" style="padding-left: 20px; background-color: #F8F8F8;">
                                    {foreach $v->sku_value as $k2=>$v2}
                                    <li class="li_width">
                                    <div class="layui-form-item">
                                        <label>
                                            <input id="Checkbox3" type="checkbox" class="chcBox_Width" value="{$v.id}:{$v2.id}" />{$v2.sku_value}
                                            <span class="li_empty"> </span>
                                        </label>
                                    </li>
                                    {/foreach}
                                </ul>
                            </div>
                            {/foreach}
                        </div>
                        <div class="div_contentlist2">
                            <ul>
                                <li>
                                    <div id="createTable">
                                    </div>
                                </li>
                            </ul>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
            $(function () {
                //SKU信息
                $(".div_contentlist label").bind("change", function () {
                    // alert('123');
                    step.Creat_Table();
                });
                var step = {
                    //SKU信息组合
                    Creat_Table: function () {
    
                        step.hebingFunction();
                        var SKUObj = $(".Father_Title");
                        //var skuCount = SKUObj.length;//
                        var arrayTile = new Array();　//标题组数
                        var arrayInfor = new Array();　//盛放每组选中的CheckBox值的对象 
                        var arrayColumn = new Array();//指定列，用来合并哪些列
                        var bCheck = true;//是否全选
                        var columnIndex = 0;
                        $.each(SKUObj, function (i, item) {
                            arrayColumn.push(columnIndex);
                            columnIndex++;
    
                            arrayTile.push(SKUObj.find("li").eq(i).html().replace("：", ""));
                            var itemName = "Father_Item" + i;
                            //选中的CHeckBox取值
                            var order = new Array();
                            $("." + itemName + " input[type=checkbox]:checked").each(function () {
                                order.push($(this).val());
                            });
                            arrayInfor.push(order);
    
                            if (order.join() == "") {
                                bCheck = false;
                            }
                            //var skuValue = SKUObj.find("li").eq(index).html();
                        });
    
                        //开始创建Table表            
                        if (bCheck == true) {
                            var RowsCount = 0;
                            $("#createTable").html("");
                            var table = $("<table id=\"process\" border=\"1\" cellpadding=\"1\" cellspacing=\"0\" style=\"width:100%;padding:5px;margin-left: 20px;\"></table>");
                            table.appendTo($("#createTable"));
                            var thead = $("<thead></thead>");
                            thead.appendTo(table);
                            var trHead = $("<tr></tr>");
                            trHead.appendTo(thead);
                            //创建表头
                            $.each(arrayTile, function (index, item) {
                                var td = $("<td>" + item + "</td>");
                                td.appendTo(trHead);
                            });
                            var itemColumHead = $("<td  style=\"width:70px;\">价格</td><td style=\"width:70px;\">数量</td> ");
                            itemColumHead.appendTo(trHead);
                            //var itemColumHead2 = $("<td >商家编码</td><td >商品条形码</td>");
                            //itemColumHead2.appendTo(trHead);
    
                            var tbody = $("<tbody></tbody>");
                            tbody.appendTo(table);
    
                            ////生成组合
                            var zuheDate = step.doExchange(arrayInfor);
                            if (zuheDate.length > 0) {
                                //创建行
                                $.each(zuheDate, function (index, item) {
                                    var td_array = item.split(",");
                                    var tr = $("<tr></tr>");
                                    tr.appendTo(tbody);
                                    $.each(td_array, function (i, values) {
                                        var td = $("<td><input name=\"attr[]\" class=\"l-text\" type=\"text\" value=" + values + "></td>");
                                        td.appendTo(tr);
                                    });
                                    var td1 = $("<td ><input name=\"price[]\" class=\"l-text\" type=\"text\" value=\"\"></td>");
                                    td1.appendTo(tr);
                                    var td2 = $("<td ><input name=\"count[]\" class=\"l-text\" type=\"text\" value=\"\"></td>");
                                    td2.appendTo(tr);
                                    //var td3 = $("<td ><input name=\"Txt_NumberSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
                                    //td3.appendTo(tr);
                                    //var td4 = $("<td ><input name=\"Txt_SnSon\" class=\"l-text\" type=\"text\" value=\"\"></td>");
                                    //td4.appendTo(tr);
                                });
                            }
                            //结束创建Table表
                            arrayColumn.pop();//删除数组中最后一项
                            //合并单元格
                            $(table).mergeCell({
                                // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始
                                cols: arrayColumn
                            });
                        }
                    },//合并行
                    hebingFunction: function () {
    
                        $.fn.mergeCell = function (options) {
                            return this.each(function () {
                                var cols = options.cols;
                                for (var i = cols.length - 1; cols[i] != undefined; i--) {
                                    // fixbug console调试 
                                    console.debug(cols[i]);
    
    
    
                                    mergeCell($(this), cols[i]);
                                }
                                dispose($(this));
                            });
                        };
                        // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法            
                        function mergeCell($table, colIndex) {
                            $table.data('col-content', ''); // 存放单元格内容 
                            $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1 
                            $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象 
                            $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用 
                            // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan 
                            $('tbody tr', $table).each(function (index) {
                                // td:eq中的colIndex即列索引 
                                var $td = $('td:eq(' + colIndex + ')', this);
                                // 取出单元格的当前内容 
                                var currentContent = $td.html();
                                // 第一次时走此分支 
                                if ($table.data('col-content') == '') {
                                    $table.data('col-content', currentContent);
                                    $table.data('col-td', $td);
                                } else {
                                    // 上一行与当前行内容相同 
                                    if ($table.data('col-content') == currentContent) {
                                        // 上一行与当前行内容相同则col-rowspan累加, 保存新值 
                                        var rowspan = $table.data('col-rowspan') + 1;
                                        $table.data('col-rowspan', rowspan);
                                        // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响 
                                        $td.hide();
                                        // 最后一行的情况比较特殊一点 
                                        // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan 
                                        if (++index == $table.data('trNum'))
                                            $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
                                    } else { // 上一行与当前行内容不同 
                                        // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理 
                                        if ($table.data('col-rowspan') != 1) {
                                            $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
                                        }
                                        // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan 
                                        $table.data('col-td', $td);
                                        $table.data('col-content', $td.html());
                                        $table.data('col-rowspan', 1);
                                    }
                                }
                            });
                        }
                        // 同样是个private函数 清理内存之用 
                        function dispose($table) {
                            $table.removeData();
                        }
                    },
                    //组合数组
                    doExchange: function (doubleArrays) {
    
                        var len = doubleArrays.length;
                        if (len >= 2) {
                            var arr1 = doubleArrays[0];
                            var arr2 = doubleArrays[1];
                            var len1 = doubleArrays[0].length;
                            var len2 = doubleArrays[1].length;
                            var newlen = len1 * len2;
                            var temp = new Array(newlen);
                            var index = 0;
                            for (var i = 0; i < len1; i++) {
                                for (var j = 0; j < len2; j++) {
                                    temp[index] = arr1[i] + "," + arr2[j];
                                    index++;
                                }
                            }
                            var newArray = new Array(len - 1);
                            newArray[0] = temp;
                            if (len > 2) {
                                var _count = 1;
                                for (var i = 2; i < len; i++) {
                                    newArray[_count] = doubleArrays[i];
                                    _count++;
                                }
                            }
                            //console.log(newArray);
                            return step.doExchange(newArray);
                        }
                        else {
                            return doubleArrays[0];
                        }
                    }
                }
                return step;
            })
        </script>
    